<template>
  <top-menu>
    <template #menu1>
      <menu-item
        v-show="menu1Visible"
        :img-url="isSigned? menu1SignedImgUrl:menu1ImgUrl"
        :sub-menus="menu1SubMenu"
        @menu-item-click="handleMenuClick"
        @click="handleMenuClick({key: 'menu1'})"
      />
    </template>
    <template #menu2>
      <menu-item
        v-show="menu2Visible"
        :img-url="isSigned? menu2SignedImgUrl:menu2ImgUrl"
        :sub-menus="menu2SubMenu"
        :img-number="menu2IconNumber"
        @menu-item-click="handleMenuClick"
        @click="handleMenuClick({key: 'menu2'})"
      />
    </template>
    <template #menu3>
      <menu-item
        v-show="menu3Visible"
        :img-url="isSigned? menu3SignedImgUrl:menu3ImgUrl"
        :sub-menus="menu3SubMenu"
        :img-number="menu3IconNumber"
        @menu-item-click="handleMenuClick"
        @click="handleMenuClick({key: 'menu3'})"
      />
    </template>
    <template #menu4>
      <menu-item
        v-show="menu4Visible"
        :img-url="isSigned? menu4SignedImgUrl:menu4ImgUrl"
        :sub-menus="isSigned? menu4SignedSubMenu:menu4SubMenu"
        :sub-menu-is-button="!isSigned"
        :top-message="isSigned? menu4HelloMsg: ''"
        @menu-item-click="handleMenuClick"
        @click="handleMenuClick({key: 'menu4'})"
      />
    </template>
  </top-menu>
</template>

<script setup>
import {defineComponent} from "vue";
import { useI18n } from 'vue-i18n'
import TopMenu from '@/components/common/TopMenu.vue'
import MenuItem  from "@/components/common/MenuItem.vue";
import menuImg from '@/assets/images/ui/top-menu/menu.png'
import menuActiveImg from '@/assets/images/ui/top-menu/menu--active.png';
import cartImg from '@/assets/images/ui/top-menu/cart.png'
import cartActiveImg from '@/assets/images/ui/top-menu/cart--active.png'
import chatImg from '@/assets/images/ui/top-menu/chat.png';
import chatActiveImg from '@/assets/images/ui/top-menu/chat--active.png';
import myImg from '@/assets/images/ui/top-menu/my.png';
import myActiveImg from '@/assets/images/ui/top-menu/my--active.png';
import freeImg from '@/assets/images/ui/free.png';
import myProfileImg from '@/assets/images/ui/my-profile.svg';
import companyInfoImg from '@/assets/images/ui/company-info.svg'
import myWalletImg from '@/assets/images/ui/my-wallet.svg'
import favoriteImg from '@/assets/images/ui/my-favorite.png'
import logoutImg from '@/assets/images/ui/logout.png'

defineComponent({
  name: 'PublicTopMenu'
})
// eslint-disable-next-line no-unused-vars
const { t } = useI18n()

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  isSigned: {
    type: Boolean,
    default: false,
  },
  menu1Visible: {
    type: Boolean,
    default: true
  },
  menu2Visible: {
    type: Boolean,
    default: true
  },
  menu3Visible: {
    type: Boolean,
    default: true
  },
  menu4Visible: {
    type: Boolean,
    default: true
  },
  menu1ImgUrl: {
    type: String,
    default: menuImg
  },
  menu1SignedImgUrl: {
    type: String,
    default: menuActiveImg,
  },
  menu2ImgUrl: {
    type: String,
    default: cartImg
  },
  menu2SignedImgUrl: {
    type: String,
    default: cartActiveImg,
  },
  menu3ImgUrl: {
    type: String,
    default: chatImg
  },
  menu3SignedImgUrl: {
    type: String,
    default: chatActiveImg,
  },
  menu4ImgUrl: {
    type: String,
    default: myImg
  },
  menu4SignedImgUrl: {
    type: String,
    default: myActiveImg,
  },
  menu1SubMenu: {
    type: Array,
    default: ()=>[
      {name: 'top_menu.menus.easy_buy', icon: '', key: 'menu1_easy_buy'},
      {name: 'top_menu.menus.shop', icon: '', key: 'menu1_shop'},
      {name: 'top_menu.menus.group', icon: '', key: 'menu1_group'},
      {name: 'top_menu.menus.catalog', icon: '', key: 'menu1_catalog'},
      {name: 'top_menu.menus.contact', icon: '', key: 'menu1_contact'},
      {name: 'top_menu.menus.my_agent', icon: '', key: 'menu1_my_agent'},
    ],
  },
  menu2SubMenu: {
    type: Array,
    default: ()=>[],
  },
  menu3SubMenu: {
    type: Array,
    default: ()=>[],
  },
  menu4SubMenu: {
    type: Array,
    default: ()=>[
      {name: 'top_menu.user.sign', icon: '', key: 'menu4_sign', btnColor: '#f94242'},
      {name: 'top_menu.user.join', icon: freeImg, key: 'menu4_join',btnColor: '#089024'},
    ],
  },
  menu4SignedSubMenu: {
    type: Array,
    default: ()=>[
      {name: 'top_menu.user_active.my_profile', icon: myProfileImg, key: 'menu4_profile'},
      {name: 'top_menu.user_active.company_info', icon: companyInfoImg, key: 'menu4_company_info'},
      {name: 'top_menu.user_active.my_wallet', icon: myWalletImg, key: 'menu4_wallet'},
      {name: 'top_menu.user_active.my_favorite', icon: favoriteImg, key: 'menu4_favorite'},
      {name: 'top_menu.user_active.logout', icon: logoutImg, key: 'menu4_logout'},
    ],
  },
  menu2IconNumber: {
    type: [Number,String],
    default: 0,
  },
  menu3IconNumber: {
    type: [Number,String],
    default: 0,
  },
  menu4HelloMsg: {
    type: String,
    default: '',
  }
})

const emits = defineEmits(['menuClick']);

const handleMenuClick = (item)=>{
  emits('menuClick',item);
}
</script>

<style scoped lang="scss">

</style>